<template>
  <div class="mood-list-container">
    <div class="mood-waterfall">
      <div v-for="item in list" :key="item.id" class="mood-card" @click="tzDetail(item)">
        <!-- 封面图片 -->
        <div class="mood-cover">
          <t-image 
            class="cover-image" 
            :src="getCoverImage(item)" 
            fit="cover" 
            :lazy="true" 
          />
          <div class="mood-stats">
            <span class="mood-views">
              <icon-font name="browse" />
              {{ formatNumber(item.readNum || 0) }}
            </span>
            <span class="mood-likes" :class="{ 'is-liked': item.like }">
              <icon-font :name="item.like ? 'heart-filled' : 'heart'" />
              {{ formatNumber(item.likes) }}
            </span>
          </div>
        </div>
        <div class="mood-content">
          <p class="mood-text">{{ item.content }}</p>
          
          <!-- 图片集预览 (如果有多张图片) -->
          <div v-if="hasMultipleImages(item)" class="mood-images">
            <t-image 
              v-for="(imgUrl, index) in getAllImages(item)" 
              :key="index"
              v-show="imgUrl && index < 3 && index > 0"
              class="mood-thumbnail"
              :src="imgUrl"
              fit="cover"
              :lazy="true"
            />
            <div v-if="getImageCount(item) > 4" class="more-images">+{{ getImageCount(item) - 3 }}</div>
          </div>
        </div>
        <div class="mood-footer">
          <div class="mood-user">
            <t-avatar :image="item.imageurl" size="small" />
            <span class="user-name">{{ item.nickname }}</span>
          </div>
          <div class="mood-time">{{ formatTime(item.createTime) }}</div>
        </div>
      </div>
    </div>
    
    <!-- 无内容状态 -->
    <div v-if="!list || list.length === 0" class="empty-state">
      <icon-font name="info-circle" class="empty-icon" />
      <p>暂无动态内容</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useRouter } from "vue-router";
import { IconFont } from 'tdesign-icons-vue-next';
import Mood from '../views/mood.vue';

// 定义动态项的接口
interface MoodItem {
  id?: string | number;
  imgurl1?: string;
  imgurl2?: string;
  imgurl3?: string;
  img1?: string;
  img2?: string;
  img3?: string;
  imgurl?: string;
  content?: string;
  nickname?: string;
  likes?: number;
  readNum?: number;
  like?: boolean;
  createTime?: string;
  coverImage?: string;
  [key: string]: any; // 允许其他属性
}

const props = defineProps({
  list: {
    type: Array as () => MoodItem[],
    default: () => []
  }
});

const router = useRouter();
const defaultCoverImage = "https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/bd26f78c344b3ad6afef7b12b1421227.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080";

// 获取动态的封面图片
const getCoverImage = (item: MoodItem): string => {
  // 判断动态是否有任何图片
  const hasAnyImage = item.imgurl1 || item.img1 || item.imgurl2 || item.img2 || item.imgurl3 || item.img3;
  
  // 如果没有任何图片，直接返回默认封面
  if (!hasAnyImage) {
    return defaultCoverImage;
  }
  
  // 有图片时，按优先级返回第一张图片
  return item.imgurl1 || item.img1 || 
         item.coverImage || 
         item.imgurl2 || item.img2 || 
         item.imgurl3 || item.img3 || 
         defaultCoverImage;
};

// 获取所有图片URL
const getAllImages = (item: MoodItem): string[] => {
  const images: string[] = [];
  
  // 按顺序添加所有可能的图片
  if (item.imgurl1) images.push(item.imgurl1);
  if (item.img1) images.push(item.img1);
  if (item.imgurl2) images.push(item.imgurl2);
  if (item.img2) images.push(item.img2);  
  if (item.imgurl3) images.push(item.imgurl3);
  if (item.img3) images.push(item.img3);
  
  // 去除重复的图片URL
  return [...new Set(images)];
};

// 跳转到动态详情
const tzDetail = (item: MoodItem): void => {
  localStorage.setItem("mood", JSON.stringify(item));
  router.push("/mooddetail");
}

// 格式化数字（大于10000显示为万）
const formatNumber = (num: number | undefined) : string => {
  if (!num) return '0';
  return num >= 10000 ? (num / 10000).toFixed(1) + ' 万' : String(num);
}

// 检查是否有多张图片
const hasMultipleImages = (item: MoodItem): boolean => {
  return getAllImages(item).length > 1;
}

// 获取所有图片键
const getImageKeys = (item: MoodItem): string[] => {
  const keys: string[] = [];
  if (item.imgurl1) keys.push('imgurl1');
  if (item.img1) keys.push('img1');
  if (item.imgurl2) keys.push('imgurl2');
  if (item.img2) keys.push('img2');
  if (item.imgurl3) keys.push('imgurl3');
  if (item.img3) keys.push('img3');
  return keys;
}

// 获取图片数量
const getImageCount = (item: MoodItem): number => {
  return getAllImages(item).length;
}

// 格式化时间
const formatTime = (timeStr: string | undefined): string => {
  if (!timeStr) return '';
  
  const date = new Date(timeStr);
  const now = new Date();
  const diff = now.getTime() - date.getTime();
  
  // 小于1小时显示分钟
  if (diff < 3600000) {
    return Math.floor(diff / 60000) + '分钟前';
  }
  // 小于24小时显示小时
  else if (diff < 86400000) {
    return Math.floor(diff / 3600000) + '小时前';
  }
  // 小于30天显示天数
  else if (diff < 2592000000) {
    return Math.floor(diff / 86400000) + '天前';
  }
  // 其他情况显示年月日
  else {
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
  }
}
</script>

<style scoped>
.mood-list-container {
  width: 100%;
}

.mood-waterfall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.mood-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}

.mood-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.mood-cover {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.mood-card:hover .cover-image {
  transform: scale(1.05);
}

.mood-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  color: white;
  font-size: 12px;
}

.mood-views, .mood-likes {
  display: flex;
  align-items: center;
  gap: 4px;
}

.is-liked {
  color: #ff5252;
}

.mood-content {
  padding: 12px;
}

.mood-text {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  margin: 0 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mood-images {
  display: flex;
  gap: 4px;
  position: relative;
}

.mood-thumbnail {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  object-fit: cover;
}

.more-images {
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 12px;
  width: 50px;
  height: 50px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mood-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.mood-user {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-name {
  font-size: 12px;
  color: #666;
}

.mood-time {
  font-size: 12px;
  color: #999;
}

.empty-state {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #999;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  color: #ddd;
}
</style>